<template>
	<view class="" style="color: #FFFFFF;">
		<image src="@/static/add/home-logo.png" style="width:329.6rpx;height:52.8rpx" class=""
			@click="statusBar = true"></image>
		<u-popup v-model="statusBar" mode="left" :mask-close-able="true">
			<view style="width: 450rpx;height: 100vh;background: #0A0A25;">
				<view class="he2"></view>
				<view class="text-a pd-t-40">
					<image src="@/static/add/logo.png" style="width: 120rpx;height: 120rpx;"></image>
				</view>
				<view class="text-a mg-t-20 f32">
					{{address.slice(0,3)}}...{{address.slice(-10)}}
				</view>
				<view class="he1"></view>
				<view class="mg-t-60">
					<view class="nth" @click="tiaozhuan(1)">
						<image src="@/static/add/home-swap.png" style="width:50rpx;height:50rpx" class=""></image>
						<view class="mg-l-20" style="">KRSwap</view>
					</view>
					<view class="nth" @click="tiaozhuan(2)">
						<image src="@/static/add/home-yqhy.png" style="width:50rpx;height:50rpx" class=""></image>
						<view class="mg-l-20" style="">{{i18n.Invite}}</view>
					</view>
					<view class="nth" @click="tiaozhuan(3)">
						<image src="@/static/add/home-wdsq.png" style="width:50rpx;height:50rpx" class=""></image>
						<view class="mg-l-20" style="">{{i18n.MyCommunity}}</view>
					</view>
					<!-- <view class="nth" @click="tiaozhuan(5)">
						<image src="@/static/add/home-gywm.png" style="width:50rpx;height:50rpx" class=""></image>
						<view class="mg-l-20" style="">{{i18n.Aboutus}}</view>
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pageto
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'tab-bar',
		data() {
			return {
				statusBar: false,
				list: [],
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getLv',
				'getRequestUrl',
				'getLangType',
				'getLoginInfo'
			]),
			address() {
				return this.getLoginInfo.address || '0'
			}
		},
		props: {
			type: {
				type: String,
				default: '0'
			},
		},
		methods: {
			tiaozhuan(e) {
				this.statusBar = false
				if (e == 1) { //swap
					pageto('/pages/swap/index', false)
				} else if (e == 2) { //邀请好友
					pageto('/pages/invite/index', false)
				} else if (e == 3) { //团队
					pageto('/pages/team/index', false)
				} else if (e == 4) { //钱包
					pageto('/pages/wallet/index', false)
				} else if (e == 5) { //关于我们
					pageto('/pages/about/index', false)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.nth {
		display: flex;
		align-items: center;
		padding: 20rpx 50rpx;
		font-size: 30rpx;
		background-color: transparent;
	}

	.nth:nth-child(1) {
		background-color: #9155A2;
	}
</style>